<script setup>
import { onMounted, onUnmounted } from 'vue';
import GameOverShow from './components/GameOverShow.vue';
import GameStartShow from './components/GameStartShow.vue';
import { useDataStore } from './stores/useData';
import { storeToRefs } from 'pinia';

// store 获取数据
const dataStore = useDataStore();

const { 
  canvasRef,
  scoreRef, 
  gameOverRef, 
  startShowRef, 
  textPower,
} = storeToRefs(dataStore)

onMounted(() => {
  dataStore.initGame()
  window.addEventListener('keydown', dataStore.handleKeyDown);
});

onUnmounted(() => {
  window.removeEventListener('keydown', dataStore.handleKeyDown);
});
</script>

<template>
  <GameStartShow v-show="startShowRef" :restartGame="dataStore.handleRestart"/>
  <div v-show="!startShowRef">
    <div><span id="score">score:{{ scoreRef }}</span><span id="power">{{ textPower }}</span></div>
    <canvas ref="canvasRef" id="myCanvas"></canvas>
    <GameOverShow v-show="gameOverRef" :restartGame="dataStore.handleRestart" />
  </div>
  
</template>

<style scoped>
#myCanvas{
  margin: 0 auto;
  border:5px solid rgb(105, 105, 105);
  border-radius:10px;
}

#score{
  text-align: left;
  font-size: xx-large;
  font-family:Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
}

#power{
  margin-left: 200px;
  font-size: xx-large;
  font-family:Georgia, 'Times New Roman', Times, serif;
  font-weight: bold;
}
</style>